/*

  产品

*/

/* 产品展示 */

.product_show {
  border-top: 1px solid transparent;
  border-bottom: 0.05rem solid #eaeaea;
  padding-bottom: 0.2rem;
  /*标题*/

  .ps-title {
    height: 0.32rem;
    background: url("../img/home/peoduct_show_title.png") no-repeat center center;
    background-size: contain;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* 图片区域 */


  .ps-imgbox-nav {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;

    li {
      flex: 0 0 50%;
      width: 100%;


      a {
        width: 100%;
        height: 2.25rem;
        display: block;
        transition: background 0.5s;
      }
    }

    li {
      &:nth-of-type(1) {
        a {
          background: url("../img/home/ma.png") no-repeat center center;
          background-size: contain;
        }

        &:hover {
          a {
            background: url("../img/home/ma_hover.png") no-repeat center center;
            background-size: contain;
          }
        }
      }

      &:nth-of-type(2) {
        background: url("../img/home/la.png") no-repeat center center;
        background-size: contain;

        &:hover {
          a {
            background: url("../img/home/la_hover.png") no-repeat center center;
            background-size: contain;
          }
        }
      }

      &:nth-of-type(3) {
        background: url("../img/home/xian.png") no-repeat center center;
        background-size: contain;

        &:hover {
          a {
            background: url("../img/home/xian_hover.png") no-repeat center center;
            background-size: contain;
          }
        }
      }

      &:nth-of-type(4) {
        background: url("../img/home/xiang.png") no-repeat center center;
        background-size: contain;

        &:hover {
          a {
            background: url("../img/home/xiang_hover.png") no-repeat center center;
            background-size: contain;
          }
        }
      }
    }
  }
}

/* 爆款单品 */
.single {
  //height: 15rem;
  //background-color: pink;
  border-top: 1px solid transparent;
  border-bottom: 0.05rem solid #eaeaea;
  padding-bottom: 0.15rem;
  /* 标题 */

  .single-title {
    height: 0.32rem;
    background: url("../img/product/single_title_img.png") no-repeat center center;
    background-size: contain;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

}

/*瀑布流*/

#waterfall,
#waterfall2 {

  width: 100%;
  margin: 0 auto;

  /*瀑布流层*/

  .box {
    height: 5rem;
    -moz-column-count: 2;
    /* Firefox */
    -webkit-column-count: 2;
    /* Safari 和 Chrome */
    column-count: 2;
    -moz-column-gap: 0.11rem;
    -webkit-column-gap: 0.11rem;
    column-gap: 0.11rem;
    -webkit-column-width: 1.61rem;
    -moz-column-width: 1.61rem;
    column-width: 1.61rem;

    /*一个内容层*/

    .img-box {
      padding: 0;
      //margin: 0 0 0.115rem 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      //border: 1px solid #000;
      margin-bottom: 0.15rem;
      height: 1.35rem;
      border-radius: 0.05rem;
      overflow: hidden;
      position: relative;

      p {
        width: 100%;
        height: 0.23rem;
        background-color: #000000;
        opacity: 0.6;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        padding-left: 0.11rem;
      }

      &:nth-of-type(1) {
        height: 1.63rem;
      }

      &:nth-of-type(7) {
        height: 0.75rem;
      }

      &:last-child {
        height: 0.75rem;
      }

      &:nth-of-type(1) {
        a {
          background: url("../img/product/s01.png") no-repeat center 94%;
          background-size: 2.165rem 2.195rem;
        }
      }

      &:nth-of-type(2) {
        a {
          background: url("../img/product/s02.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(3) {
        a {
          background: url("../img/product/s03.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(4) {
        a {
          background: url("../img/product/s04.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(5) {
        a {
          background: url("../img/product/s05.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(6) {
        a {
          background: url("../img/product/s06.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(7) {
        a {
          background: url("../img/product/s07.png") no-repeat center center;
          background-size: 1.7rem 1.7rem;
        }
      }

      &:nth-of-type(8) {
        a {
          background: url("../img/product/s08.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(9) {
        a {
          background: url("../img/product/s09.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(10) {
        a {
          background: url("../img/product/s10.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(11) {
        a {
          background: url("../img/product/s11.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:nth-of-type(12) {
        a {
          background: url("../img/product/s12.png") no-repeat center 75%;
          background-size: 2rem 2rem;
        }
      }

      &:last-child {
        a {
          background: url("../img/product/s13.png") no-repeat center center;
          background-size: 1.7rem 1.7rem;
        }
      }


      a {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.05rem;
        }
      }
    }
  }
}

/* 加餐力荐 */
.addfood {
  border-top: 1px solid transparent;
  padding-bottom: 0.25rem;
  /* 标题 */

  .addfood-title {
    height: 0.32rem;
    background: url("../img/product/add_title_img.png") no-repeat center center;
    background-size: contain;
    margin-top: 0.25rem;
    margin-bottom: 0.2rem;
  }

  /* 瀑布流 */

  #waterfall2 {
    .box {
      height: 5rem;

      .img-box {
        &:nth-of-type(1) {
          a {
            background-image: url("../img/product/a01.png");
          }
        }

        &:nth-of-type(2) {
          a {
            background-image: url("../img/product/a02.png");
          }
        }

        &:nth-of-type(3) {
          a {
            background-image: url("../img/product/a03.png");
          }
        }

        &:nth-of-type(4) {
          a {
            background-image: url("../img/product/a04.png");
          }
        }

        &:nth-of-type(5) {
          a {
            background-image: url("../img/product/a05.png");
          }
        }

        &:nth-of-type(6) {
          height: 0.75rem;
          a {
            background-image: url("../img/product/a06.png");
          }
        }

        &:nth-of-type(7) {
          height: 1.35rem;
          a {
            background-image: url("../img/product/a07.png");
          }
        }

        &:nth-of-type(8) {
          a {
            background-image: url("../img/product/a08.png");
          }
        }

        &:nth-of-type(9) {
          a {
            background-image: url("../img/product/a09.png");
          }
        }

        &:nth-of-type(10) {
          a {
            background-image: url("../img/product/a10.png");
          }
        }

        &:nth-of-type(11) {
          a {
            background-image: url("../img/product/a11.png");
          }
        }
      }
    }
  }
}


#btn1,
#btn2 {
  width: 1.615rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  border: solid 0.005rem #030000;
  line-height: 0.4rem;
  text-align: center;
  font-size: 0.12rem;
  margin: 0 auto;
}

.loading {
  background: url("../img/product/loading_img.png") no-repeat center center;
  background-size: 0.255rem 0.27rem;
}

.runsca {
  animation: run360 2s linear infinite;
  display: block;
  margin: 0.1rem auto 0 auto;
  width: 0.155rem;
  height: 0.17rem;
}

.hide {
  display: none;
}

.show {
  display: block;
}

@keyframes run360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
